<template>
	<view>
		<view v-if="realDataList.length>0">
			<view class="cardBg" v-for="(item, index) in realDataList" :key="index">
				<uni-section :title="item.name" type="line" />
				<view class="row" v-for="(real, idx) in item.data" :key="idx">
					<view class="left">
						<view class="lefttop">
							<uni-icons color="#0066cc" v-if="item.name == 'AI'" type="star" size="20"></uni-icons>
							<uni-icons color="#0066cc" v-else-if="item.name == 'DI'" type="paperplane"
								size="20"></uni-icons>
							<uni-icons color="#0066cc" v-else-if="item.name == 'DO'" type="mail-open"
								size="20"></uni-icons>
							<uni-icons color="#0066cc" v-else-if="item.name == 'STA'" type="fire" size="20"></uni-icons>
							<uni-icons color="#0066cc" v-else-if="item.name == 'SET'" type="cloud-download"
								size="20"></uni-icons>
						</view>
						<view>
							<view class="text">{{real.Name}}</view>
							<view class="time">{{real.Time}}</view>
						</view>
					</view>
					<view class="right">
						<view class="text">{{real.Value}}</view>
						<text style="font-size: 12px;margin-left: 3px;color:#aaa">{{real.Unit}}</text>
						<!-- <uni-icons type="right" size="15" color="#aaa"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>
		<u-loading-page style="z-index:9" :loading="loading" loading-text="loading..." bg-color="rgb(0, 0, 0,.3)">
		</u-loading-page>
	</view>
</template>

<script>
	import uniSection from '@/uni_modules/uni-section/components/uni-section/uni-section.vue'
	export default {
		name: "deviceRelaData",
		props: {
			queryData: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		computed: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		data() {
			return {
				realDataList: [],
				viewData: [],
				loading: true,
				updateInterval: null,
			}
		},
		components: {
			uniSection
		},
		methods: {
			// updateValues() {
			// 	this.viewData.forEach(item => {
			// 		item.Value = Math.min(80, parseFloat((Math.random() * 70).toFixed(2)));
			// 		if (item.Value > 80) {
			// 			item.Value = 80;
			// 		}
			// 	});
			// },
			async getGwData() {
				const db = uniCloud.database()
				let str = 'ASCG123456789/rs232/1'
				// let str = this.queryData.linkstr
				const [sn, port, addr] = str.split('/')
				const res = await db.collection('gateways').where({
					category: 'realtime',
					name: sn
				}).get()
				const result = res.result.data[0].ports[port].Device[addr - 1].data
				const filterData = result.filter(item => item.PropertyType === 'realtime')
				this.viewData = filterData.filter(val => ['SH', 'Inlet Temp', 'Cond Fan', 'High Press'].includes(val
					.Name))
				const groups = filterData.reduce((acc, item) => {
					if (!acc[item.TransType]) {
						acc[item.TransType] = [];
					}
					if (item.TransType === "AI") {
						item.Value = (Math.random() * 100).toFixed(2);
					}
					item.Time = this.getCurrentTime;
					acc[item.TransType].push(item);
					return acc;
				}, {});

				const sortedGroups = Object.entries(groups).sort((a, b) => {
					if (a[0] === 'AI') return -1;
					if (b[0] === 'AI') return 1;
					return 0;
				});
				this.realDataList = sortedGroups.map(([name, data]) => ({
					name,
					data
				}));
				this.loading = false;
			},
		},
		created() {
			this.getGwData()
		},
		beforeDestroy() {}
	}
</script>

<style lang="scss" scoped>
	.cardBg {
		::v-deep .uni-icons {
			color: #0066cc !important;
		}

		.title {
			color: #0066cc;
			font-size: 28rpx;
			font-weight: 600;
		}

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			position: relative;

			&:last-child {
				border-bottom: 0
			}

			.left {
				display: flex;
				align-items: center;

				.lefttop {
					display: flex;
					align-items: center;
				}

				.uni-icons {
					color: $brand-theme-color !important;
				}

				.time {
					padding-left: 20rpx;
					color: #aaa;
					font-size: 24rpx;
					padding-top: 4rpx;
				}

				.text {
					padding-left: 20rpx;
					color: #666
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #0066cc;
				}
			}

			button {
				position: absolute;
				top: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				opacity: 0;
			}
		}

	}

	::v-deep .u-cell__label {
		font-size: 14px !important;
		font-weight: 400 !important;
		color: rgba(145, 146, 158, 1) !important;
	}

	::v-deep .u-cell__value {
		color: rgba(63, 140, 255, 1) !important;
		font-size: 15px;
		font-weight: 600;
	}

	::v-deep .u-cell__title-text {
		color: rgba(10, 22, 41, 1) !important;
		font-size: 15px;
		font-weight: 500;
	}

	.real {
		padding: 10px 10px 0;
		margin: 10px 0px 10px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 58px rgba(196, 203, 214, 0.1);

	}

	.charts-box {
		width: 100%;
		height: 200px;
		margin: 10px 0 10px;
	}
</style>